<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改接口</title>
    <link rel="stylesheet" type="text/css" href="/static/hplus/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/hplus/css/style.css">
    <link rel="stylesheet" type="text/css" href="/static/layer/skin/layer.css">
    <link rel="stylesheet" type="text/css" href="/static/editor.md/css/editormd.min.css">
    <style type="text/css">
        .col-sm-10 {width: 320px;display: inline-block;}
        .col-sm-2 {text-align: right;width: 125px;}
        .must {color: #ff0000;font-size: 19px;float: right;margin-left: 5px;}
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal" onsubmit="return false">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">接口名称<span class="must">*</span></label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="name" autocomplete="off" value="{$article.name}">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" style="vertical-align: top">接口描述</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" name="description" rows="5" style="resize: none">{$article.description}</textarea>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">排序</label>
                            <div class="col-sm-3">
                                <input type="number" class="form-control" name="sort" autocomplete="off" value="{$article.sort}">
                            </div>
                            <div class="col-sm-3">
                                <input class="btn btn-primary" type="button" id="save" value="保存"> &nbsp; <a class="btn btn-default" id="cancel">取消</a>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="ibox-content">
                    <label class="col-sm-2 control-label">接口内容</label>
                    <div class="col-sm-12">
                        <div id="editormd"><textarea style="display: none"><?php echo $article['content']; ?></textarea></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="/static/hplus/js/jquery.min.js?v=<?php echo time()?>"></script>
<script type="text/javascript" src="/static/layer/layer.js?v=<?php echo time()?>"></script>
<script type="text/javascript" src="/static/royui/royui.min.js?v=<?php echo time()?>"></script>
<script type="text/javascript" src="/static/editor.md/editormd.js?v=<?php echo time()?>"></script>
<script type="text/javascript">
    $(function () {
        $('#save').click(function () {
            let $name = $('[name="name"]')
            if ($name.val() === '') {
                layer.msg('接口名称不能为空', {icon: 5, time: 1000})
                return false
            }
            let $description = $('[name="description"]').val(), $sort = $('[name="sort"]').val(), $content = $('#editormd textarea').val();
            $.ajax({
                type: 'post', dataType: 'json', cache: false,
                url: '/doc/editArticle',
                data: {'id': '{$article.id}', 'name': $name.val(), 'description': $description, 'sort': $sort, 'content': $content},
                success: function ($data) {
                    if ($data.code === 200) {
                        layer.msg($data.message, {icon: 1, time: 1000}, function () {
                            location.reload()
                        })
                    } else {
                        layer.msg($data.message, {icon: 5, time: 1000})
                        return false
                    }
                }
            })
        })
        $('#cancel').click(function () {
            window.location.href = '/doc/edit?id={$article.doc_id}'
        })
        editormd("editormd", {
            placeholder: "请撰写接口内容（Markdown格式）",
            width: "100%",
            height: 650,
            path: "/static/editor.md/lib/",
            syncScrolling: "single",
            saveHTMLToTextarea: true,
            flowChart: true,
            sequenceDiagram: true,
            htmlDecode: "style,script,iframe,br",
            tex: true,
            tocm: true,
            taskList: true,
            toolbarIcons: function () {
                return [
                    "undo", "redo", "|",
                    "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|",
                    "h1", "h2", "h3", "h4", "h5", "h6", "|",
                    "list-ul", "list-ol", "hr", "|",
                    "link", "reference-link", "image", "code", "preformatted-text", "code-block", "table", "datetime", "html-entities", "pagebreak", "|",
                    "goto-line", "watch", "preview", "clear", "search", "|",
                    "help"
                ]
            }
        });
    });
</script>
</html>
